<template>
  <div >
    <egrid  border
            :data="tableData"
            :columns="columns"
            :columns-schema="columnsSchema"
            :columns-props="columnsProps">
    </egrid>
    <div class="egrid-foot" ></div>
    <el-dialog :append-to-body="true" :visible.sync="isShowPicDialog" title="图片浏览"  >
      <img width="100%" :src="rowInfo.url"   alt="rowInfo.name">
    </el-dialog>

  </div>

</template>
<script type="text/ecmascript-6">
  import InfoCategory from 'components/wms/comm/InfoCategory';
  import PcDialog from 'components/dialog';
  var operatingRecord = {
    template:
      `<div >
        <span>{{row.actionTypeDisplay}}<a href="#" @click="toOnclikLink(row)" >{{row.urlDisplay}}</a></span>

      </div>`,
    props: ['row'],
    methods: {
      toOnclikLink(val) {
        this.$emit('emit-showImg', val);
      }
    }
  };
  let that;
  export default{
    props: {
      id: [String, Number]
    },
    components: {InfoCategory,
      PcDialog
    },
    data() {
      return {
        tableData: [],
        isShowPicDialog: false,
        rowInfo: [],
        columnsSchema: {
          '时间': {minWidth: 100},
          '操作人': {minWidth: 150}
        },

        columnsProps: {
          height: 40,
          minWidth: 250,
          align: 'center',

          showOverflowTooltip: true
        },
        columns: [
          {
            label: '时间',
            fixed: true,
            prop: 'createdTimeDisplay'
          },
          {
            label: '操作人',
            fixed: true,
            prop: 'creator'
          },
          {
            label: '操作记录',
          //  prop: ['creator','createdTimeDisplay']
            component: operatingRecord,
            align: 'center',
            fixed: true,
            listeners: {
              'emit-showImg' (data) {
                that.showImgFn(data);
              }
            }
          }
        ]
      };
    },
    created() {
      that = this;
      this.initData();
    },
    methods: {
      // 根据找库订单ID获取找库订单的详细数据
      initData() {
        this.ajax({
          url: '/maliwms/wr/wrFileLogs/' + this.$props.id,
          type: 'GET',
          success: (res) => {
            setTimeout(() => {
              this.$pcNProgress.done();
            }, 300);
            this.tableData = res.result;
          }
        });
      },
      downloadReport(url, filename) { // 文件下载
        this.content = url;
        const blob = new Blob([this.content]);
        let aTag = document.createElement('a');
        aTag.download = filename; // 下载的文件名
        aTag.href = URL.createObjectURL(blob);
        aTag.click();
        URL.revokeObjectURL(blob);
      },
      showImgFn(data) {
        if (data.fileType === 1) {
          that.isShowPicDialog = true;
          that.rowInfo = data;
        } else if (data.fileType === 3) {  // 判断类型为fileType=3 的bmp图片
          var flieArr = data.url.split('.');
          var suffix = flieArr[flieArr.length - 1];
          if (suffix === 'bmp') {
            that.isShowPicDialog = true;
            that.rowInfo = data;
          } else {
            this.downloadReport(data.url, data.name);
          }
        } else {
          this.downloadReport(data.url, data.name);
        }
      }
    }
  };
</script>
<style>

  .el-table th.is-leaf .cell{
    /*font-size:16px!important;*/
  }
  .egrid-foot {
    height: 30px;
  }
  a:link {
    color: #409EFF
  }
  a:visited {
    color: #409EFF
  }
  a:hover {
    color: #409EFF
  }
  a:active {
    color: #409EFF
  }
  .el-dialog__body{
    padding-top:0px;
    padding-left: 20px;
    padding-right: 20px;
    padding-bottom: 20px;
  }
</style>
